<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符串链接</title>
    <style>
      #ul1 {
        background: rgb(216, 13, 199);
        height: 170px;
        display: flex;
      }
    </style>
  </head>
  <body>
    <script>
      let name = 'name'
      let age = 12
      /*一般默认字符串拼接*/
      //   let str = '姓名叫' + name + '年龄是' + age + '岁'
      /*ES6中的字符串链接*/
      let str = `姓名叫${name}年龄是${age}`
      console.log(str)

      // let data = [
      //   { name: 'apple', price: 23 },
      //   { name: 'banana', price: 34 },
      //   { name: 'banana', price: 23 },
      //   { name: 'banana', price: 44 },
      //   { name: 'banana', price: 55 }
      // ]
      // window.onload = function() {
      //   let ul = document.querySelector('#ul1')
      //   for (let i = 0; i < data.length; i++) {
      //     var li1 = document.createElement('li')
      //     li1.innerHTML = `<h1>${data[i].name}</h1>
      //                   <span>${data[i].price}</span>

      //     `
      //     ul.appendChild(li1)
      //   }
      // }

      // 字符串的查找
      /*str.indexOf(要查找的东西)-----返回索引的位置
        str.includes(要查找的东西)-----返回布尔值，true or false*/
      // let str1 = 'apple banana pear'
      // if (str1.indexOf('banana') != -1) {
      //   alert(true)
      // } else {
      //   alert(false)
      // }

      //ES6,字符串查找
      // let str2 = 'apple banana pear'
      // alert(str2.includes('apple2'))

      //检测字符串以谁开始
      let str3 = 'https://www.zhihu.com/hot'
      let str4 = 'https://ai.taobao.com/?pid=mm_120870817_21150745_71322467'
      console.log(str3.startsWith('http'))
      //检测字符串以谁结尾
      let str5 = '3.png'
      console.log(str5.endsWith('.png'))

      // 字符串重复 ------str.repeat(重复的次数)
      let str6 = 'Hello ES6'
      console.log(str6.repeat(3))

      // 填充字符串
      /*padStart()在前面填充*/
      let str7 = 'Hello' // 字符串
      let padStr = 'E' // 填充的字符串
      console.log(str7.padStart(str7.length + padStr.length, padStr))
      /*padEnd()在后面填充*/
      console.log(str7.padEnd(str7.length + padStr.length, padStr))
    </script>
    <ul id="ul1"></ul>
  </body>
</html>
